import React from "react";
import { Row, Col } from "antd";
import "./index.less";
import Util from "@/utils/utils";
import JSONP from "@/axios";
import Axios from "../../axios";
export default class Header extends React.Component {
  //构造器
  constructor() {
    super();
    this.state = {};
  }

  //生命周期
  componentWillMount() {
    this.setState({
      username: "张三"
    });
    setInterval(() => {
      //获取系统时间,格式化
      let sysTime = Util.formateDate(new Date().getTime());
      //时间存进去
      this.setState({
        sysTime
      });
    }, 1000);
    //调用天气
    this.getWeatherAPI();
  }

  getWeatherAPI() {
    let city = "北京";
    Axios.jsonp({
      url:
        "http://api.map.baidu.com/telematics/v3/weather?location=" +
        encodeURIComponent(city) +
        "&output=json&ak=3p49MVra6urFRGOT9s8UBWr2"
    }).then(res => {
      // debugger;
      if (res.status == "success") {
        let data = res.results[0].weather_data[0];
        this.setState({
          dayPictureUrl: data.dayPictureUrl,
          weather: data.weather
        });
      }
    });
  }
  render() {
    const menuType = this.props.menuType;
    return (
      <div className="header">
        <Row className="header-top">
        {/* menuType 存在时显示logo */}
          {menuType ? (
            <Col span="6" className="logo">
              <img src="../../../src/img/logo-ant.svg" alt="" />
              <span style={{marginLeft:10}}>后台管理系统</span>
            </Col>
          ) : (
            ""
          )}
          <Col span={menuType ? 18 : 24}>
            <span>欢迎,{this.state.username}</span>
            <a href="">退出</a>
          </Col>
        </Row>
        {/* menuType 存在时隐藏面包屑导航 */}
        {menuType ? (
          ""
        ) : (
          <Row className="header-bread">
            <Col className="header-title" span="4">
              首页
            </Col>
            <Col span="20" className="header-weather">
              <span className="date">{this.state.sysTime}</span>
              <span className="weather">
                <img src={this.state.dayPictureUrl} alt="" />
                <span className="wtext">{this.state.weather}</span>
              </span>
            </Col>
          </Row>
        )}
      </div>
    );
  }
}
